<template>
    <div>
        <el-form :inline="true" :model="Search" class="demo-form-inline">
            <el-form-item v-if="RoleTable==1"  label="店铺名:">
                <el-input v-model="Search.branchname" placeholder="根据店铺查找"></el-input>
            </el-form-item>
            <el-form-item label="菜品名:">
                <el-input v-model="Search.goodsname" placeholder="根据商品名查找"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="initshopsTable">查询</el-button>
                <el-button type="primary" @click="flush">刷新</el-button>
            </el-form-item>
        </el-form>

        <el-button v-if="RoleTable!=1" type="primary" @click="addInfo = true">添加</el-button>

        <el-table
                :data="shopsTable"
                style="width: 100%;height: 80%" >
            <el-table-column
                    v-if="RoleTable==1"
                prop="branchname"
                label="店铺名">
            </el-table-column>
            <el-table-column
                    prop="goodsname"
                    label="商品名称">
            </el-table-column>
            <el-table-column
                    prop="goodsurl"
                    label="商品图片"
            >
<!--                <%&#45;&#45;头像的回显&#45;&#45;%>-->
                <template slot-scope="scope">
                    <img :src="scope.row.goods_url" width="50" height="30">
                </template>
            </el-table-column>
            <el-table-column
                    prop="descirbe"
                    label="商品介绍">
            </el-table-column>
            <el-table-column
                    prop="goods_price"
                    label="商品价格">
            </el-table-column>
            <el-table-column
                    prop="typename"
                    label="菜系">
            </el-table-column>
            <el-table-column
                    prop="status"
                    label="状态">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.status==0" type="success">正在出售</el-tag>
                    <el-tag v-if="scope.row.status==1" type="danger">商品下架</el-tag>
                </template>
            </el-table-column>

            <el-table-column
                    label="操作"
                    width="300px">
                <template      slot-scope="scope">
                    <el-button  v-if="RoleTable!=1"  @click="edit(scope.row)" type="text" size="small">编辑</el-button>

                    <el-button   v-if="RoleTable!=1" @click="delTo(scope.row.goodsid)" type="text"  size="small" >删除</el-button>
                    <el-button   v-if="RoleTable==1" type="text" size="small">请联系：{{scope.row.tel}}</el-button>

                </template>
            </el-table-column>

        </el-table>


        <el-dialog
                title="添加"
                :visible.sync="addInfo"
                width="30%">
            <el-form :model="addForm" :rules="addrules"   ref="addForm"  label-width="80px">
                <el-form-item label="菜品名" prop="goodsname" >
                    <el-input v-model="addForm.goodsname"></el-input>
                </el-form-item>
                <el-form-item label="菜品图片" prop="goods_url">
                    <el-upload
                            :action="'http://192.168.1.18:81/user/upload'"
                            :show-file-list="false"
                            :on-success="handleSuccess2"
                            :on-error="handleError"
                            :before-upload="beforeUpload"
                            class="avatar-uploader">
                        <img style="height: 180px;width: 200px"  v-if="addForm.goods_url" :src="addForm.goods_url">
                        <i v-else class="el-icon-plus avatar-uploader-icon" />
                    </el-upload>
                </el-form-item>
                <el-form-item label="菜品描述" prop="descirbe" >
                    <el-input v-model="addForm.descirbe"></el-input>
                </el-form-item>
                <el-form-item label="菜品价格" prop="goods_price" >
                    <el-input v-model.number="addForm.goods_price"></el-input>
                </el-form-item>
                <el-form-item label="分配菜系" prop="typeid" >
                    <el-select v-model="addForm.typeid" placeholder="请选择职位">
                        <el-option v-for="type in TypeTable" :label="type.name" :value="type.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="上下架">
                    <el-switch v-model="addForm.status"
                               active-color="#13ce66"
                               inactive-color="#ff4949"
                               :active-value="0"
                               :inactive-value="1"
                    ></el-switch>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="add('addForm')">确 定</el-button>
         </span>
        </el-dialog>

        <el-dialog
                title="修改"
                :visible.sync="updateInfo"
                width="30%">
            <el-form :model="updateForm"   :rules="updaterules"   ref="updateForm"  label-width="80px">
                <el-form-item label="菜品名" prop="goodsname" >
                    <el-input v-model="updateForm.goodsname"></el-input>
                </el-form-item>
                <el-form-item label="菜品图片" prop="goods_url">
                    <el-upload
                            :action="'http://192.168.1.18:81/user/upload'"
                            :show-file-list="false"
                            :on-success="handleSuccess"
                            :on-error="handleError"
                            :before-upload="beforeUpload"
                            class="avatar-uploader">
                        <img style="height: 180px;width: 200px"  v-if="updateForm.goods_url" :src="updateForm.goods_url">
                        <i v-else class="el-icon-plus avatar-uploader-icon" />
                    </el-upload>
                </el-form-item>
                <el-form-item label="菜品描述" prop="descirbe" >
                    <el-input v-model="updateForm.descirbe"></el-input>
                </el-form-item>
                <el-form-item label="菜品价格" prop="goods_price" >
                    <el-input v-model="updateForm.goods_price"></el-input>
                </el-form-item>
                <el-form-item label="分配菜系" prop="typeid" >
                    <el-select v-model="updateForm.typeid" placeholder="请选择职位">
                        <el-option v-for="type in TypeTable" :label="type.name" :value="type.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="上下架">
                    <el-switch v-model="updateForm.status"
                               active-color="#13ce66"
                               inactive-color="#ff4949"
                               :active-value="0"
                               :inactive-value="1"
                    ></el-switch>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
            <el-button @click="updateInfo = false">取 消</el-button>
            <el-button type="primary" @click="update('updateForm')">确 定</el-button>
         </span>
        </el-dialog>

        <el-dialog
                title="删除提示"
                :visible.sync="delectInfo"
                width="30%"
                center>
            <span>您确定删除吗</span>
            <span slot="footer" class="dialog-footer">
    <el-button @click="delectInfo = false">取 消</el-button>
    <el-button type="primary" @click=" del()">确 定</el-button>
  </span>
        </el-dialog>
<!--分页插件-->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="pageSizes"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>

    </div>
</template>

<script>
    export default {
        name: "List",
        data(){
            return{
                Search: {},
                //添加修改
                addInfo:false,
                updateInfo:false,
                addForm:{},
                addrules: {
                    goodsname: [
                        {required: true, message: "请输菜品名", trigger: "blur"},
                    ],
                    goods_url: [
                        {required: true, message: "请选择菜品图片", trigger: "blur"},
                    ],
                    descirbe: [
                        {required: true, message: "请输入菜品描述", trigger: "blur"},
                    ],
                    goods_price: [
                        { type: 'number', message: '必须为数字值', trigger: 'blur'},
                        {required: true, message: "请输入菜品价格", trigger: "blur"},
                    ],
                    typeid: [
                        {required: true, message: "请选择分配菜系", trigger: "change"},
                    ],
                },
                updateForm:{},
                delectInfo: false,

                currentPage:1,
                pageSizes:[2,4,8],
                pageSize:2,
                total:0,

                RoleSearch:{},
                shopsTable:[],
                TypeTable:{},
                RoleTable:"",
                updaterules: {
                    goodsname: [
                        {required: true, message: "请输菜品名", trigger: "blur"},
                    ],

                    descirbe: [
                        {required: true, message: "请输入菜品描述", trigger: "blur"},
                    ],

                    typeid: [
                        {required: true, message: "请选择分配菜系", trigger: "change"},
                    ],
                },
            }
        },
        created() {
            this.initshopsTable();
            this.initTypeTable();
            this.initRoleTable();
        },
        methods:{
            flush(){
                window.location.reload();
            },
            handleSuccess(res, file) {
                // console.log("修改图片")
                // console.log(res)
                // console.log(file)
                this.updateForm.goods_url = res;
            },
            handleSuccess2(res, file) {
                // console.log("修改图片")
                // console.log(res)
                // console.log(file)
                this.addForm.goods_url = res;
            },
            handleError(res) {
                this.$message.error(res.message);
            },
            beforeUpload(file) {
                let isJpg = file.type === "image/jpeg";
                if (!isJpg) {
                    this.$message.error("上传头像图片只能是JPG格式！");
                    return false;
                }
                let isLt10M = file.size / 1024 / 1024 < 10;
                if (!isLt10M) {
                    this.$message.error("上传头像图片不能超过2MB！");
                    return false;
                }
                return true;
            },
            // //图片上传成功后调用的方法,(拿到图片地址)
            // handleAvatarSuccess(res, file) {
            //     this.addForm.goods_url=res.data;
            // },
            // //修啊图片上传成功之后回显的图片
            // ediThandleAvatarSuccess(res,file){
            //     this.updateForm.goods_url=res.data;
            // },

            delTo(id){
                this.id = id;
                this.delectInfo = true;

            },
            del(){
                this.$http.post("/goods/goods/goodsDel?goodsid="+this.id).then(result=>{
                        if (result.data.code === 2000) {
                            this.$message.success(result.data.msg);
                            this.delectInfo = false;
                            this.initshopsTable();

                        }
                    });
            },
            edit(data){
                this.updateInfo = true;
                this.updateForm = data;
            },
            update(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$http.post("/goods/goods/goodsUpdate", this.updateForm).then(result => {
                            if (result.data.code === 2000) {
                                this.$message.success(result.data.msg);
                                this.initshopsTable();
                                this.updateInfo = false;
                            }
                        })
                    }
                });
            },

            add(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$http.post("/goods/goods/shopsAdd",this.addForm).then(result=>{
                            if(result.data.code === 2000){
                                this.$message.success(result.data.msg);
                                this.initshopsTable();
                                this.addInfo = false;
                            }
                        })
                    }
                });
            },
            //每页显示的条数大小改变时触发的事件
            handleSizeChange(val) {
                this.pageSize=val;
                this.initshopsTable();
            },
            //页码改变时触发的方法
            handleCurrentChange(val) {
                this.currentPage=val;
                this.initshopsTable();
            },
            initshopsTable(){
                this.$http.post("/goods/goods/selectAll?currentPage="+this.currentPage+"&pageSize="+this.pageSize,this.Search ).then(result=>{
                    this.shopsTable=result.data.data.list;
                    this.total=result.data.data.total;
                    console.log(result)
                    // this.total = result.data.data.total;
                })
            },

            initTypeTable(){
                //如果传递得参数为json格式 那么必须为post提交
                this.$http.get("/goods/goods/selectType").then(result=>{
                    console.log(result)
                    this.TypeTable=result.data.data
                })
            },
            initRoleTable(){
                //如果传递得参数为json格式 那么必须为post提交
                this.$http.get("/goods/goods/selectRole").then(result=>{
                    console.log(result)
                    this.RoleTable=result.data.data
                })
            },

        }
    }
</script>

<style >

</style>